<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <AreaSelector></AreaSelector>

      <el-button type="primary" :icon="Plus">新增公寓</el-button>

      <el-table :data="apartmentList" border stripe style="margin: 20px 0;">
        <el-table-column label="名称" show-overflow-tooltip prop="name" align="center" ></el-table-column>
        <el-table-column label="详细地址" show-overflow-tooltip prop="addressDetail" align="center" ></el-table-column>
        <el-table-column label="空闲房间数" prop="freeRoomCount" align="center"></el-table-column>
        <el-table-column label="房间总数" prop="totalRoomCount" align="center" ></el-table-column>
        <el-table-column label="所属省份" prop="provinceName" align="center" ></el-table-column>
        <el-table-column label="所属城市" prop="cityName" align="center" ></el-table-column>
        <el-table-column label="所属区域" prop="districtName" align="center" ></el-table-column>
        <el-table-column label="联系方式" show-overflow-tooltip prop="phone" align="center" ></el-table-column>
        <el-table-column label="入住状态" align="center">
          <template v-slot="{ row, $index }">
            <el-tag type="success" v-if="row.freeRoomCount>0">待入住</el-tag>
            <el-tag type="danger" v-else>已满员</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布状态" align="center">
          <template v-slot="{ row, $index }">
            <el-switch v-model="row.isRelease" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template v-slot="{ row, $index }">
            <el-button type="warning" :icon="Edit">修改</el-button>
            <el-button type="danger" :icon="Delete" @click="doRemoveById(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="queryParams.current" v-model:page-size="queryParams.size" :page-sizes="[1,2,3,4]"
        layout="prev, pager, next, jumper,->,sizes,total" :total="total" @current-change="showApartmentList()"
        @size-change="showApartmentList()" />

    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '', //组件名称
})
</script>
<script lang="ts" setup>
    import { ref,onMounted } from "vue"
    import { Plus, Edit, Delete } from "@element-plus/icons-vue"
    import {PageResData,ApartmentListQueryParamsData,ApartmentData,getApartmentList,removeApartmentById } from "@/api/apartmentManagement/apartment.ts"
    import { ElMessageBox,ElMessage} from "element-plus";
    let total=ref(2);

    let queryParams=ref<ApartmentListQueryParamsData>({
      current:1,
      size:5
    })
    let apartmentList=ref<ApartmentData[]>([])

    /* 定义集合查询方法*/
    let showApartmentList= async () =>{
      //解构相应数据
      let {data,code}=await getApartmentList(queryParams.value);
      if(code==200){
        //修isRelease为boolean，1已发布-》true,0未发布->false
        apartmentList.value=data.records.map(item =>{
          item.isRelease = item.isRelease ==1;
          return item;
        })
        //修改total
        total.value=data.total;
      }

    }

    let doRemoveById= (row)=>{

      ElMessageBox.confirm(
      `你确定要删除<${row.name}>公寓嘛?`,
      'Warning',
      {
        confirmButtonText:"删除",
        cancelButtonText:"取消",
        type:"warning"
      }
    ).then(async() => {
      let{code,data}=await removeApartmentById(row.id);
      if(code == 200){
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
      }
    })
    .catch(() => {
      ElMessage({
            type: 'info',
            message: '取消删除',
          })
    })

      

    }
    /* 挂载vue时，执行分页查询公寓列表 */
    onMounted(()=>{
      showApartmentList();
    })
</script>
<style lang="scss" scoped></style>